<template>
  <div class="property-panel">
    <!-- 位置与大小 -->
    <div class="property-section">
      <div class="section-header">
        <h4>位置与大小</h4>
      </div>
      <div class="property-fields">
        <div class="property-field">
          <label>X</label>
          <el-input-number 
            v-model="properties.left" 
            size="small" 
            :min="0" 
            :precision="0"
            controls-position="right"
            @change="updateProperty('left', properties.left)"
          />
        </div>
        
        <div class="property-field">
          <label>Y</label>
          <el-input-number 
            v-model="properties.top" 
            size="small" 
            :min="0" 
            :precision="0"
            controls-position="right"
            @change="updateProperty('top', properties.top)"
          />
        </div>
        
        <div class="property-field">
          <label>宽度</label>
          <el-input-number 
            v-model="properties.width" 
            size="small" 
            :min="1" 
            :precision="0"
            controls-position="right"
            @change="updateProperty('width', properties.width)"
          />
        </div>
        
        <div class="property-field">
          <label>高度</label>
          <el-input-number 
            v-model="properties.height" 
            size="small" 
            :min="1" 
            :precision="0"
            controls-position="right"
            @change="updateProperty('height', properties.height)"
          />
        </div>
      </div>
    </div>
    
    <!-- 旋转 -->
    <div class="property-section">
      <div class="section-header">
        <h4>旋转</h4>
      </div>
      <div class="property-fields">
        <div class="property-field full-width">
          <label>角度</label>
          <el-slider 
            v-model="properties.angle" 
            :min="0" 
            :max="360" 
            :step="1"
            show-input
            show-stops
            :show-tooltip="false"
            @change="updateProperty('angle', properties.angle)"
          />
        </div>
      </div>
    </div>
    
    <!-- 外观 -->
    <div class="property-section">
      <div class="section-header">
        <h4>外观</h4>
      </div>
      <div class="property-fields">
        <div class="property-field">
          <label>填充颜色</label>
          <div class="color-picker">
            <input 
              type="color" 
              v-model="properties.fill"
              @change="updateProperty('fill', properties.fill)"
              class="color-input"
            />
            <div class="color-preview" :style="{ backgroundColor: properties.fill }"></div>
          </div>
        </div>
        
        <div class="property-field">
          <label>描边颜色</label>
          <div class="color-picker">
            <input 
              type="color" 
              v-model="properties.stroke"
              @change="updateProperty('stroke', properties.stroke)"
              class="color-input"
            />
            <div class="color-preview" :style="{ backgroundColor: properties.stroke }"></div>
          </div>
        </div>
        
        <div class="property-field">
          <label>描边宽度</label>
          <el-input-number 
            v-model="properties.strokeWidth" 
            size="small" 
            :min="0" 
            :max="20"
            :precision="1"
            controls-position="right"
            @change="updateProperty('strokeWidth', properties.strokeWidth)"
          />
        </div>
        
        <div class="property-field full-width">
          <label>不透明度</label>
          <el-slider 
            v-model="properties.opacity" 
            :min="0" 
            :max="1" 
            :step="0.01"
            show-input
            :show-tooltip="false"
            @change="updateProperty('opacity', properties.opacity)"
          />
        </div>
      </div>
    </div>
    
    <!-- 文字属性 (仅当选中文本对象时显示) -->
    <div v-if="isTextObject" class="property-section">
      <div class="section-header">
        <h4>文字</h4>
      </div>
      <div class="property-fields">
        <div class="property-field full-width">
          <label>文本内容</label>
          <el-input 
            v-model="properties.text" 
            type="textarea" 
            rows="2"
            @change="updateProperty('text', properties.text)"
          />
        </div>
        
        <div class="property-field">
          <label>字体</label>
          <el-select 
            v-model="properties.fontFamily" 
            size="small"
            @change="updateProperty('fontFamily', properties.fontFamily)"
          >
            <el-option value="Arial" label="Arial" />
            <el-option value="Helvetica" label="Helvetica" />
            <el-option value="Times New Roman" label="Times New Roman" />
            <el-option value="SimSun" label="宋体" />
            <el-option value="SimHei" label="黑体" />
            <el-option value="Microsoft YaHei" label="微软雅黑" />
          </el-select>
        </div>
        
        <div class="property-field">
          <label>字号</label>
          <el-input-number 
            v-model="properties.fontSize" 
            size="small" 
            :min="8" 
            :max="72"
            :precision="0"
            controls-position="right"
            @change="updateProperty('fontSize', properties.fontSize)"
          />
        </div>
        
        <div class="property-field full-width">
          <label>样式</label>
          <div class="text-style-buttons">
            <el-button 
              size="small" 
              :type="properties.fontWeight === 'bold' ? 'primary' : 'default'"
              @click="toggleTextStyle('fontWeight', 'bold')"
            >
              B
            </el-button>
            
            <el-button 
              size="small" 
              :type="properties.fontStyle === 'italic' ? 'primary' : 'default'"
              @click="toggleTextStyle('fontStyle', 'italic')"
            >
              I
            </el-button>
            
            <el-button 
              size="small" 
              :type="properties.underline ? 'primary' : 'default'"
              @click="toggleTextStyle('underline', true)"
            >
              U
            </el-button>
          </div>
        </div>
        
        <div class="property-field full-width">
          <label>对齐</label>
          <div class="text-style-buttons">
            <el-button 
              size="small" 
              :type="properties.textAlign === 'left' ? 'primary' : 'default'"
              @click="updateProperty('textAlign', 'left')"
            >
              左对齐
            </el-button>
            
            <el-button 
              size="small" 
              :type="properties.textAlign === 'center' ? 'primary' : 'default'"
              @click="updateProperty('textAlign', 'center')"
            >
              居中
            </el-button>
            
            <el-button 
              size="small" 
              :type="properties.textAlign === 'right' ? 'primary' : 'default'"
              @click="updateProperty('textAlign', 'right')"
            >
              右对齐
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch, reactive } from 'vue';

// 定义属性
const props = defineProps({
  selectedObject: Object
});

// 定义事件
const emit = defineEmits(['update-property', 'toggle-text-style']);

// 是否为文本对象
const isTextObject = computed(() => {
  return props.selectedObject && props.selectedObject.type === 'text';
});

// 对象的属性
const properties = reactive({
  left: 0,
  top: 0,
  width: 100,
  height: 100,
  angle: 0,
  fill: '#ffffff',
  stroke: '#000000',
  strokeWidth: 1,
  opacity: 1,
  // 文本特有属性
  text: '',
  fontFamily: 'Arial',
  fontSize: 20,
  fontWeight: 'normal',
  fontStyle: 'normal',
  underline: false,
  textAlign: 'left'
});

// 监听选中的对象
watch(() => props.selectedObject, (newObj) => {
  if (newObj) {
    updateProperties(newObj);
  }
}, { immediate: true });

// 更新属性对象
function updateProperties(obj) {
  // 基本属性
  properties.left = obj.left || 0;
  properties.top = obj.top || 0;
  properties.angle = obj.angle || 0;
  properties.fill = obj.fill || '#ffffff';
  properties.stroke = obj.stroke || '#000000';
  properties.strokeWidth = obj.strokeWidth || 1;
  properties.opacity = obj.opacity === undefined ? 1 : obj.opacity;
  
  // 宽度和高度 (考虑缩放)
  if (obj.width !== undefined && obj.scaleX !== undefined) {
    properties.width = Math.round(obj.width * obj.scaleX);
  } else if (obj.width !== undefined) {
    properties.width = Math.round(obj.width);
  } else if (obj.radius !== undefined) {
    properties.width = Math.round(obj.radius * 2 * (obj.scaleX || 1));
  } else {
    properties.width = 100;
  }
  
  if (obj.height !== undefined && obj.scaleY !== undefined) {
    properties.height = Math.round(obj.height * obj.scaleY);
  } else if (obj.height !== undefined) {
    properties.height = Math.round(obj.height);
  } else if (obj.radius !== undefined) {
    properties.height = Math.round(obj.radius * 2 * (obj.scaleY || 1));
  } else {
    properties.height = 100;
  }
  
  // 文本属性
  if (isTextObject.value) {
    properties.text = obj.text || '';
    properties.fontFamily = obj.fontFamily || 'Arial';
    properties.fontSize = obj.fontSize || 20;
    properties.fontWeight = obj.fontWeight || 'normal';
    properties.fontStyle = obj.fontStyle || 'normal';
    properties.underline = obj.underline || false;
    properties.textAlign = obj.textAlign || 'left';
  }
}

// 更新对象属性
function updateProperty(property, value) {
  emit('update-property', property, value);
}

// 切换文本样式
function toggleTextStyle(property, value) {
  emit('toggle-text-style', property, value);
}
</script>

<style scoped>
.property-panel {
  padding: 10px;
}

.property-section {
  margin-bottom: 20px;
}

.section-header {
  margin-bottom: 10px;
}

.section-header h4 {
  margin: 0;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.property-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.property-field {
  width: calc(50% - 4px);
  display: flex;
  flex-direction: column;
}

.property-field.full-width {
  width: 100%;
}

.property-field label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.color-picker {
  position: relative;
  display: flex;
  align-items: center;
}

.color-input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.color-preview {
  width: 100%;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  position: relative;
}

.color-preview::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.text-style-buttons {
  display: flex;
  gap: 8px;
}
</style>